<template>
  <span>
    <el-tag size="mini" :type="tagType" style="margin-right: 3px">
      <icon-font v-for="icon in icons" :icon="icon" style="margin-right: 3px; font-size: 5px"></icon-font>
    </el-tag>
    <el-tag size="mini" :type="tagType" style="margin-right: 3px">
      {{ deviceRequirement.minRam }}~{{ deviceRequirement.maxRam }}GB
    </el-tag>
    <el-tag size="mini" :type="tagType"> {{ deviceRequirement.processorArchitectureList.join('、') }}</el-tag>
  </span>
</template>

<script>
import {DEVICE_OS_MIXIN} from "@/components/new/const/deviceInfo";
import IconFont from "@/components/new/iconfont/IconFont";

export default {
  name: "TestEnvironment",
  components: {IconFont},
  props: {
    deviceRequirement: {},
    capableToClaim: {
      default: true
    }
  },
  mixins: [DEVICE_OS_MIXIN],
  computed: {
    icons(){
      const icons = new Set(this.deviceRequirement.osList.map(os => this.DEVICE_OS[os]));
      return icons
    },
    tagType(){
      return this.capableToClaim ? 'info' : 'warn';
    }
  }
}
</script>

<style scoped>

</style>
